<template>
  <div class="app-main-container">
    <div class="app-main-title">
      {{ mainTitle }}
      <div class="goback" @click="goBack">
        <i class="el-icon-refresh-left" /> {{ $t('message.fhsyy') }}
      </div>
    </div>

    <el-form
      ref="ruleForm"
      class="doumee-form"
      :model="param"
      :rules="rules"
      label-width="auto"
      label-suffix="："
    >
      <div class="property-title">{{ $t('message.ttxx') }}</div>
      <el-form-item :label="$t('message.ttmc')" prop="teamName">
        <el-input
          v-model="param.teamName"
          type="text"
          :placeholder="$t('message.qsr') + $t('message.ttmc')"
          maxlength="50"
          :disabled="isRenew"
        />
      </el-form-item>
      <el-form-item :label="$t('message.ttlx2')" prop="type">
        <el-input
          v-model="param.type"
          type="text"
          :placeholder="$t('message.qsrttlx')"
          maxlength="50"
          :disabled="isRenew"
        />
      </el-form-item>
      <el-form-item :label="$t('message.ttdz')">
        <el-input
          v-model="param.addr"
          type="text"
          :placeholder="$t('message.qsr') + $t('message.ttdz')"
          maxlength="50"
          :disabled="isRenew"
        />
      </el-form-item>
      <el-form-item :label="$t('message.yyzz')" prop="yyzzUrl">
        <transition name="fade">
          <Cropper
            v-if="dialogCropperVisible"
            :option-img="optionImg"
            :fileinfo="fileinfo"
            use-type="MEMBER_IMG"
            :fixed-number="[32, 32]"
            @formSubmit="cropperSubmit"
            @formClose="cropperClose"
          />
        </transition>
        <el-upload
          class="device-uploader"
          :action="uploadFileUrl"
          :data="uploadData"
          :show-file-list="false"
          accept=".pdf,.jpg,.png"
          :on-change="addFileChange"
          :disabled="isRenew"
        >
          <i class="el-icon-plus uploader-icon" />
          <div
            v-show="param.yyzzUrl"
            class="file"
            :style="'background-image: url(' + param.yyzzUrl + ')'"
          >
            <div v-if="!isRenew" class="delete">
              <i class="el-icon-delete icon" @click.stop="deleteYyzzImage" />
            </div>
          </div>
        </el-upload>
      </el-form-item>
      <div class="line-style" />
      <div class="property-title">{{ $t('message.qyxx') }}</div>
      <el-form-item v-if="isRenew" :label="$t('message.qyje')" prop="amot">
        <el-input v-model="param.amot" :placeholder="$t('message.qsr') + $t('message.qyje')" />
      </el-form-item>
      <el-form-item v-if="isRenew" :label="$t('message.htfj')" prop="configPicture">
        <el-upload
          class="device-uploader"
          :action="uploadFileUrl"
          :data="uploadData"
          :show-file-list="false"
          accept="image"
          :on-success="htUploadSuccess"
        >
          <i class="el-icon-plus uploader-icon" />
          <div
            v-show="param.hturl"
            class="file"
            :style="'background-image: url(' + param.hturl + ')'"
          >
            <div class="delete">
              <i class="el-icon-delete icon" @click.stop="deleteHtImage" />
            </div>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item :label="$t('message.hyk')">
        <div
          v-for="(item, index) in vipTypes"
          :key="index"
          :class="[index == vipType ? 'select-style' : 'normal-style', param.teamId ? '' : 'pointer']"
          class="card-style"
          @click="selectCard(index)"
        >
          <img :src="item.showAvatar" alt="">
          <div class="card-name">{{ item.cardName }}</div>
          <span class="card-first-price">{{ $t('message.rmbfh') }}{{ item.price }}</span>
        </div>
      </el-form-item>
      <div class="line-style" />
      <div class="property-title">{{ $t('message.glyxx') }}</div>
      <div class="isMember">
        <el-form-item :label="$t('message.memberInfo')">
          <div style="width: 50%">
            <div class="card-message">
              <div class="first-line">
                <span class="message-title-style">NO.</span>
                <span class="message-value-style">{{
                  cardMessage.number
                }}</span>
                <span class="message-value-style">{{
                  cardMessage.nickName
                }}</span>
                <span v-if="cardMessage.cardName" class="card-name-style">{{
                  cardMessage.cardName
                }}</span>
              </div>
              <div class="first-line">
                <span class="message-title-style">{{ $t('message.sj') }}：</span>
                <span class="message-value-style">{{ cardMessage.phone }}</span>
                <span class="message-title-style">{{ $t('message.czje') }}：</span>
                <span class="message-value-style">{{
                  cardMessage.remainingMoney ? cardMessage.remainingMoney : 0
                }}</span>
                <span class="message-title-style">{{ $t('message.zsje') }}：</span>
                <span class="message-value-style">{{
                  cardMessage.remainingGiveMoney
                    ? cardMessage.remainingGiveMoney
                    : 0
                }}</span>
              </div>
            </div>
          </div>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button
          type="primary"
          :loading="loadingb"
          @click="onSubmit()"
        >{{ $t('message.tj') }}</el-button>
      </el-form-item>
    </el-form>
    <orderDialog ref="child" @orderSuccess="$router.replace({ name: 'GroupList' })" />
  </div>
</template>

<script>
import {
  uploadFile,
  cardList,
  VIPInfo,
  infoTeam,
  editTeam,
  renewTeam
} from '@/api'
import Cropper from '@/components/cropper'
import store from '@/store'
export default {
  name: 'GroupEdit',
  components: {
    Cropper
  },
  data() {
    return {
      modalDialog: store.getters.dialog,
      dialogCropperVisible: false,
      payLoading: false,
      optionImg: '',
      files: {},
      fileinfo: {},
      teamId: '',
      mainTitle: '',
      loding: false,
      isRenew: false,
      codeBtnText: this.$t('message.hqyzm'),
      time: 60,
      codeDsiabled: false,
      uploadFileUrl: uploadFile,
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
          )
        }
      },
      uploadData: {
        folder: 'MEMBER_IMG',
        type: ''
      },
      venueId: sessionStorage.getItem('venueId'),
      param: {},
      rules: {
        teamName: [{ required: true, message: this.$t('message.qsr') + this.$t('message.ttmc'), trigger: 'blur' }],
        type: [{ required: true, message: this.$t('message.qsr') + this.$t('message.ttlx2'), trigger: 'blur' }],
        // yyzzUrl: [
        //   { required: true, message: this.$t('message.qsc') + this.$t('message.yyzz'), trigger: 'change' }
        // ],
        amot: [
          {
            pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
            required: true,
            message: this.$t('message.qsryqjelw'),
            trigger: 'blur'
          }
        ],
        adminPhone: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.glysjh'), trigger: 'blur' }
        ],
        vcode: [{ required: true, message: this.$t('message.qsr') + this.$t('message.yzm'), trigger: 'blur' }],
        adminName: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.glyxm'), trigger: 'blur' }
        ],
        sex: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.glyxb'), trigger: 'change' }
        ],
        password: [
          { required: true, message: this.$t('message.xmmbn'), trigger: 'blur' },
          {
            min: 6,
            max: 20,
            message: this.$t('message.cdlds'),
            trigger: 'blur'
          }
        ]
      },
      vipTypes: [],
      loadingb: false,
      vipType: '',
      cardNum: '',
      cardMessage: {}
    }
  },
  created() {
    // this.meta = this.$route.meta.buttons || []
    this.getCardList()
  },
  mounted() {
    if (this.$route.query.id && !this.$route.query.isRenew) {
      this.teamId = this.$route.query.id
      this.isRenew = this.$route.query.isRenew
      this.$route.meta.title = this.$t('message.edit') + this.$t('message.tthy')
      this.mainTitle = this.$t('message.edit') + this.$t('message.tthy')
      this.getDetail()
    } else {
      this.teamId = this.$route.query.id
      this.isRenew = this.$route.query.isRenew
      this.$route.meta.title = this.$t('message.xuqian') + this.$t('message.tthy')
      this.mainTitle = this.$t('message.xuqian') + this.$t('message.tthy')
      this.getDetail()
    }
  },
  methods: {
    selectCard(index) {
      if (this.param.teamId) return
      this.vipType = index
      this.$set(this.param, 'cardTypeId', this.vipTypes[index].id)
    },
    goBack() {
      this.$router.replace('/vipList/groupList')
    },
    searchAction() {
      VIPInfo({
        param: {
          phoneOrNo: this.param.adminPhone
        }
      })
        .then((res) => {
          console.log(res)
          if (res.errorCode === '000000') {
            this.cardMessage = res.record
          }
        })
        .catch((err) => {
          console.log(err)
          this.cardMessage = {}
        })
    },
    getCardList() {
      // 获取卡类型列表
      cardList({
        param: {
          cardName: null,
          isnormal: null,
          channel: null
          // type: '1'
        }
      })
        .then((res) => {
          // console.log(res)
          if (res.errorCode === '000000') {
            // this.vipTypes = res.recordList
            res.recordList.forEach(item => {
              if (item.isnormal !== '1' && item.channel !== '1_0') {
                this.vipTypes.push(item)
              }
            })
            // for (const item of res.recordList) {
            //   // console.log(item)
            //   if (item.isnormal !== '1' && item.channel !== '1_0') {
            //     this.vipTypes.push(item)
            //   }
            // }
            // this.$set(this.param, 'cardType', this.vipTypes[0].id)
            // console.log(this.vipTypes)
          }
        })
    },
    getDetail() {
      infoTeam({ param: { id: this.teamId }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.param = res.record
          this.vipType = this.vipTypes.findIndex(item => item.id === this.param.cardTypeId)
          // for (const key in this.vipTypes) {
          //   const vipCard = this.vipTypes[key]
          //   if (vipCard.id === this.param.cardTypeId) {
          //     this.vipType = key
          //   }
          // }
          this.searchAction()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 上传合同图片成功
    htUploadSuccess(res, file, fileList) {
      if (res.success) {
        this.$set(this.param, 'hturl', res.showUrl)
        this.$set(this.param, 'htUrl', res.insertUrl)
        this.$refs.ruleForm.clearValidate()
      } else {
        this.$message.error(res.msg || this.$t('message.scsb'))
      }
    },
    // 删除已上传合同
    deleteHtImage() {
      this.$set(this.param, 'htUrl', '')
      this.$set(this.param, 'hturl', '')
    },

    // 上传营业执照成功
    yyzzUploadSuccess(res, file, fileList) {
      if (res.success) {
        this.$set(this.param, 'yyzzUrl', res.showUrl)
        this.$set(this.param, 'yyzz', res.insertUrl)
        this.$refs.ruleForm.clearValidate()
      } else {
        this.$message.error(res.msg || this.$t('message.scsb'))
      }
    },
    // 上传图片，开始裁剪
    async addFileChange(file) {
      // 上传，拿到file文件
      this.files = file.raw
      this.$nextTick(() => {
        this.optionImg = URL.createObjectURL(file.raw)
        this.fileinfo = file.raw
        this.dialogCropperVisible = true
      })
    },
    // 裁剪确定按钮
    cropperSubmit(config) {
      // preImg 完整路径  urlPre 不包含域名
      if (config.success) {
        this.$set(this.param, 'yyzzUrl', config.showUrl)
        this.$set(this.param, 'yyzz', config.insertUrl)
        this.dialogCropperVisible = false
        this.$refs.ruleForm.clearValidate()
      } else {
        this.$message.error(config.msg || this.$t('message.scsb'))
        this.dialogCropperVisible = false
      }
    },
    // 裁剪取消
    cropperClose() {
      this.dialogCropperVisible = false
    },
    // 删除已上传营业执照
    deleteYyzzImage() {
      this.$set(this.param, 'yyzzUrl', '')
      this.$set(this.param, 'yyzz', '')
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.param.venueId = this.venueId
          const param = { ...this.param }
          this.loadingb = true
          if (this.isRenew) {
            renewTeam({
              param: {
                amot: param.amot,
                htUrl: param.htUrl,
                id: param.teamId,
                venueId: param.venueId
              }
            })
              .then((res) => {
                this.loadingb = false
                if (res.errorCode === '000000') {
                  const obj = {
                    ...res.record,
                    allPrice: res.record.money
                  }
                  this.$refs.child.continuePay(obj, 'groupOpen')
                }
              })
              .catch((err) => {
                this.loadingb = false
                console.log(err)
              })
          } else {
            editTeam({
              param: {
                addr: param.addr,
                cardType: param.cardTypeId,
                id: param.teamId,
                name: param.teamName,
                type: param.type,
                yyzz: param.yyzz,
                venueId: param.venueId
              }
            })
              .then((res) => {
                this.loadingb = false
                if (res.errorCode === '000000') {
                  this.$message.success(this.$t('message.editcg'))
                  this.$router.go(-1)
                }
              })
              .catch((err) => {
                this.loadingb = false
                console.log(err)
              })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.code-style {
  width: 70%;
}
.code-btn-style {
  margin-left: 20px;
}
.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
.line-style {
  margin-bottom: 20px;
}
.device-uploaders {
  ::v-deep .el-upload-list__item {
    width: 80px;
    height: 80px;
  }
  ::v-deep .el-upload {
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
}
.card-style {
  display: inline-block;
  vertical-align: middle;
  width: 23%;
  height: 220px;
  margin-right: 10px;
  margin-bottom: 10px;
  img {
    width: 80%;
    height: 111px;
    margin-top: 20px;
    margin-left: 10%;
    vertical-align: bottom;
    padding: 0;
    border-radius: 4px;
  }
  .card-name {
    color: #222;
    font-size: 18px;
    font-weight: 500;
    margin-top: 15px;
    margin-left: 20px;
    padding: 0;
    line-height: 18px;
    // background-color: red;
  }
  .card-first-price {
    color: #dd0707;
    font-size: 20px;
    font-weight: 600;
    margin-top: 16px;
    margin-left: 20px;
  }
}
.card-message {
  margin-top: 10px;
  background-color: #f2f2f2;
  height: 60px;
  line-height: 20px;
  .first-line {
    height: 30px;
    padding: 5px;
    .message-title-style {
      color: #999;
    }
    .card-name-style {
      display: inline-block;
      border: 1px #999 solid;
      border-radius: 4px;
      background-color: #fff;
      font-size: 12px;
      padding-left: 5px;
      padding-right: 5px;
      height: 20px;
      text-align: center;
    }
    .close-style {
      font-size: 20px;
      float: right;
      margin-right: 5px;
      margin-top: -2px;
      padding: 0;
      border: 0px #999 solid;
    }
    .message-value-style {
      margin-right: 15px;
      color: #222;
    }
  }
}
.select-style {
  border: solid 2px #1943a9;
}
.normal-style {
  border: solid 1px #d8d8d8;
}
.pay-style {
  width: 110px;
  height: 30px;
  font-size: 15px;
  line-height: 1px;
  vertical-align: middle;
}
.slelect-pay-style {
  background-color: #1943a9;
  color: #fff;
}
.normal-pay-style {
  border: 1px solid #d8d8d8;
  background-color: #fff;
  color: #222;
}
.messgae-style {
  color: #dd0707;
}
.price-style {
  font-size: 17px;
  font-weight: 500;
}
.unit-style {
  margin-right: 20px;
}
.bottom-speace-style {
  margin-bottom: 10px;
}
.card-message {
  margin-bottom: 10px;
  background-color: #f2f2f2;
  height: 60px;
  line-height: 20px;
  .first-line {
    height: 30px;
    padding: 5px;
    .message-title-style {
      color: #999;
    }
    .card-name-style {
      display: inline-block;
      border: 1px #999 solid;
      border-radius: 4px;
      background-color: #fff;
      font-size: 12px;
      padding-left: 5px;
      padding-right: 5px;
      height: 20px;
      text-align: center;
    }
    .close-style {
      font-size: 20px;
      float: right;
      margin-right: 5px;
      margin-top: -2px;
      padding: 0;
      border: 0px #999 solid;
    }
    .message-value-style {
      margin-right: 15px;
      color: #222;
    }
  }
}
.footer-style {
  display: flex;
  justify-content: space-between;
  background-color: #f2f2f2;
  margin: -10px -20px -30px;
  height: 50px;
  .bottom-left {
    margin-left: 20px;
    height: 20px;
    margin-top: 15px;
    .sum-title-style {
      font-size: 15px;
      color: #222;
    }
    .sum-pay-value-style {
      font-size: 17px;
      font-weight: 500;
      color: #dd0707;
    }
    .dis-title-style {
      font-size: 14px;
      color: #222;
    }
    .discoun-style {
      font-size: 16px;
      color: #dd0707;
    }
  }
  .bottom-right {
    margin-right: 20px;
    margin-top: 10px;
    height: 30px;
    .pay-action-style {
      width: 100px;
      height: 30px;
      font-size: 15px;
      line-height: 1px;
      vertical-align: middle;
    }
  }
}
</style>
